<template>
    <div class="login">
        <div class="login-box">
            <div class="left-box">
                <div><img src="../assets/logo.jpg" alt=""></div>
            </div>
            <div class="right-box">
                <div>
                    <el-form ref="formRef" :model="user_data" label-width="auto">
                        <el-form-item label="账号: " prop="account">
                            <el-input v-model="user_data.userName" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="密码: " prop="password">
                            <el-input v-model="user_data.password" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="sign_in">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>


<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserAuthStore } from "../stores/userStore";
import message_notice from "../functional/message_notice";

const userAuthStore = useUserAuthStore()

// 存储用户的登录/注册信息的变量
let user_data = reactive({
    userName: '',
    password: ''
})


const router = useRouter()

const sign_in = () => {         //因为要实现切换登录/注册的功能,所以这里需要先判断一下是否为切换,还是需要发起post请求,在函数最后再赋值
    if (user_data.userName === '' || user_data.password === '') {
        message_notice("账号或密码不能为空", "warning")
        return
    } else {
        userAuthStore.sign_in(user_data)
        if (userAuthStore.token !== "") {
            message_notice("登录成功", "success")
            router.push('/index')
        }
    }
}

</script>


<style scoped lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, #4facfe, #00f2fe);
    display: flex;
    justify-content: center;
    align-items: center;

    .login-box {
        width: 750px;
        height: 450px;
        background: white;
        display: flex;
        flex-direction: row;
        border: 1px solid #ccc;
        border-radius: 20px;

        .left-box {
            width: 320px;
            height: 450px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 320px;
                height: 320px;
            }
        }

        .right-box {
            width: 380px;
            height: 450px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>